<template>
  <div class="yi-table">
    <el-table
      ref="table"
      v-bind="$attrs"
      v-on="$listeners"
      header-cell-class-name="yi-table-header-cell"
      cell-class-name="yi-table-cell"
      :stripe="true"
      @sort-change="sortChange"
      v-loading="loading"
      element-loading-text="数据加载中..."
      element-loading-spinner="el-icon-loading"
      :row-class-name="rowClassName"
      @row-click="rowClick">
      <el-table-column v-if="selection" align="center" type="selection" width="55"
                       :selectable="selectable"></el-table-column>
      <el-table-column v-if="index" label="序号" align="center" type="index" width="50" fixed="left"></el-table-column>
      <slot></slot>
    </el-table>
    <el-pagination
      v-if="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-size="pageSize"
      :page-sizes="[5, 10, 15, 20, 50, 100]"
      :layout="layout"
      :total="total">
      <span class="pagination-text">显示</span>
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "YiTable",
  inheritAttrs: false,
  props: {
    selection: {
      type: Boolean,
      default: false
    },
    total: {
      type: Number,
      default: null
    },
    option: {
      type: Object,
      default: () => {
        return {
          current: "size",
          page: "page",
          order: "order",
          prop: "prop"
        }
      }
    },
    isMounted: {
      type: Boolean,
      default: false
    },
    selectable: {
      type: Function
    },
    index: {
      type: Boolean,
      default: true
    },
    rowClassKey: {
      type: String,
      default: 'id'
    },
    layout: {
      type: String,
      default: "slot, sizes, prev, pager, next, total"
    }
  },
  data() {
    return {
      loading: false,
      currentPage: 1, // 分页 - page 1
      pageSize: 10, // 分页 - size 10
      order: "", // 排序 - 正序/倒序
      prop: "", // 排序 - 字段prop
      rowClassID: null // 点击列将不同颜色提示用户已被选中
    }
  },
  methods: {
    handleSizeChange(val) { // 条数
      this.pageSize = val;
      this.getData();
    },
    handleCurrentChange(val) { // 页数
      this.currentPage = val;
      this.getData();
    },
    getData() { // 获取table 数据
      this.loading = true;
      this.$emit('getData', this.getPagination());
    },
    getPagination() { // 对外抛出分页数据
      return {
        [this.tableOption['current']]: this.pageSize,
        [this.tableOption['page']]: this.currentPage,
        [this.tableOption['order']]: this.order,
        [this.tableOption['prop']]: this.prop
      }
    },
    refresh() { // 重置数据
      this.currentPage = 1;
      this.getData();
    },
    toggleRowSelection(row, selected) {
      this.$refs.table.toggleRowSelection(row, selected);
    },
    clearSelection() {
      this.$refs.table.clearSelection();
    },
    sortChange(data) { // 排序
      if (data.order) {
        this.order = data.order;
        this.prop = data.prop;
      } else {
        this.order = "";
        this.prop = "";
      }
      this.getData();
    },
    doLayout() {
      this.$nextTick(() => {
        this.$refs.table.doLayout();
      })
    },
    rowClick(row, column, event) {
      this.rowClassID = row[this.rowClassKey];
    },
    rowClassName({ row }) {
      let className = "";
      if (row[this.rowClassKey] === this.rowClassID) {
        className = "selectRow";
      }
      // else className = "";
      // console.log('row', row);
      return className;
    }
  },
  computed: {
    tableOption() {
      return Object.assign({
        current: "current",
        page: "page",
        order: "order",
        prop: "prop"
      }, this.option);
    }
  },
  mounted() {
    if (!this.isMounted) this.getData();
  }
}
</script>

<style>
.yi-table .el-table--border th {
  background: #fafafa;
}

.yi-table .el-table th > .cell {
  color: #333A6F;
}

.yi-table .yi-table-header-cell, .yi-table .yi-table-cell {
  text-align: left;
}

.yi-table .el-pagination {
  text-align: right;
  margin-top: 20px;
}

.yi-table .pagination-text {
  font-size: 13px;
  font-weight: normal;
  color: #606266;
  margin-right: 10px;
}

.yi-table .el-table td.el-table__cell div {
  color: #333A6F;
}

.yi-table .el-table .el-table__header-wrapper th,
.yi-table .el-table .el-table__fixed-header-wrapper th {
  background-color: #E5EFFF;
}

.yi-table .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
  background: #eef3ff;
}

.yi-table .el-table th.el-table__cell.is-leaf,
.yi-table .el-table td.el-table__cell {
  border-bottom: none;
}

.yi-table .el-table thead.is-group th.el-table__cell {
  background-color: #E5EFFF;
}

.yi-table .el-table .selectRow td.el-table__cell {
  background: #4f8eff !important;
}
.yi-table .el-table .selectRow td.el-table__cell div {
  color: #FFF;
}
.yi-table .el-table .selectRow td.el-table__cell div .el-button {
  color: #FFF;
}
.yi-table .el-table .selectRow td.el-table__cell div .el-button.is-disabled {
  color: #dce1eb;
}
</style>
